<template>
  <section class="class_info_cont">
    <div class="inner">
      <header class="breadcrumb">
        <router-link :to='"/"' tag="span">首页</router-link>
        >
        <router-link :to='list.tag' tag="span">{{list.tag=='classlist'?'选课中心':'体育商城'}}</router-link>
        >
        <span>{{list.tag=='classlist'?'课程详情':'商品详情'}}</span>
      </header>
      <div class="class_introduce">
        <section class="shop_show">
          <div class="goods_img_wraper">
            <div class="big_img">
              <img :src="bigImg" alt="">
            </div>
            <swiper :options="swiperOption">
              <swiper-slide class="small_img" v-for="(item,index) in infoOpaction.pictures" :key="index">
                  <img @click="changeImg(item.url)" :src="item.url" :alt="item.product">           
              </swiper-slide>
            </swiper>
          </div>
          <div v-if="infoOpaction.detail" class="goods_info_wrap">
            <h3>{{infoOpaction.detail.product||infoOpaction.detail.course}}</h3>
            <div style="text-align:center;margin:5px 0;">{{infoOpaction.detail.description}}</div>
            <div class="price">￥{{infoOpaction.detail.price}}</div>
            <div class="attr" v-if="list.tag !='classlist'">
              <dl>
                <dt>颜色</dt>
                <dd :class="{is_active:isSelected.color==item}" 
                    @click="changeSelect('color',item)" 
                    v-for="(item,i) in attr.color" 
                    :key="i">{{item}}<i></i></dd>
                <dd v-if="attr.color&&!attr.color.length">暂无</dd>
              </dl>
              <dl>
                <dt>性别</dt>
                <dd :class="{is_active:isSelected.sex==item}" 
                    @click="changeSelect('sex',item)" 
                    v-for="(item,i) in attr.sex" 
                    :key="i">{{item}}<i></i></dd>
                <dd v-if="attr.sex&&!attr.sex.length">暂无</dd>
              </dl>
              <dl>
                <dt>尺寸</dt>
                <dd :class="{is_active:isSelected.size==item}" 
                    @click="changeSelect('size',item)" 
                    v-for="(item,i) in attr.size" 
                    :key="i">{{item}}<i></i></dd>
                <dd v-if="attr.size&&!attr.size.length">暂无</dd>
              </dl>
            </div>
            <div class="attr" v-else>
              <dl>
                <dt>学期</dt>
                <dd class="is_active">{{infoOpaction.detail.system}}<i></i></dd>
              </dl>
              <dl>
                <dt>时间</dt>
                <dd class="is_active">{{infoOpaction.detail.date}}<i></i></dd>
              </dl>
              <dl>
                <dt>星级</dt>
                <dd class="is_active">{{infoOpaction.detail.star}}星级<i></i></dd>
              </dl>
              <dl>
                <dt>场馆</dt>
                <dd class="is_active">{{infoOpaction.detail.area}}<i></i></dd>
              </dl>
            </div>
            <in-car-or-buy :data='list.tag=="shoplist"?goodsOp:classOp'></in-car-or-buy>
          </div>
        </section>
        <el-tabs class="class_info_slider"
          v-model="activeName" 
          @tab-click="handleClick">
          <el-tab-pane class="goods_info" :label="list.tag=='classlist'?'课程详情':'商品详情'" name="first">
            <div v-html="infoOpaction.detail?infoOpaction.detail.detail:''">
              暂无详情
            </div>
          </el-tab-pane>
          <el-tab-pane label="评价" name="second">
            <header class="comm_head">
              <el-radio-group @change="chooseComm" v-model="comment">
                <el-radio label="3">全部</el-radio>
                <el-radio label="0">好评</el-radio>
                <el-radio label="1">中评</el-radio>
                <el-radio label="2">差评</el-radio>
              </el-radio-group>
            </header>
            <section class="comm_wrap">
              <div class="comm_item" v-for="item in commentList" :key="item.id">
                <div class="user_info">
                  <i><img :src="item.headImg" alt=""></i>
                  <span>{{item.username}}</span>
                </div>
                <div class="comm_content">
                  <p class="comm_content_main">
                    {{item.content?item.content:
                      item.type==0?"该用户默认好评":
                      item.type==1?"该用户默认中评":
                      item.type==2?"该用户默认差评":'暂无'}} 
                  </p>
                  <div class="comm_content_tip">
                    类别：{{item.color}} {{item.sex}} {{item.size}}{{list.tag=='classlist'?'默认':''}}
                  </div>
                </div>
                <div class="comm_timer">
                    {{GLOBAL.timestampToTime(item.create_at)}}
                </div>
              </div>
              <div class="comm_item" v-if="!commentList.length">暂无评价</div>
            </section>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </section>
</template>
<script>
import inCarOrBuy from "../components/inCarOrBuy";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "infoMain",
  components: {
    inCarOrBuy,
    swiper,
    swiperSlide
  },
  data() {
    return {
      list: {//当前页面参数
        id: this.$route.query.id,
        tag: this.$route.query.tag
      },
      activeName: "first",
      infoOpaction: {},//商品信息
      commentList:[],
      comment:'3',//评价
      attr:{},
      isSelected:{
        // color:'',
        // sex:'',
        // size:''
      },
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 15,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      bigImg: "",
      classOp:{
          course_id:'',//课程id
          quantity:1,//数量
          price:'',//价格
          course:''//课程名称|
      },
      goodsOp:{
          product:'',//商品名称|
          sku:"",//商品id
          size:'',
          sex:'',
          specialty:'',
          color:'',
          price:'',//价格
      }
    };
  },
  beforeMount() {
    //路由参数，处理缺少参数跳转
    if (!this.$route.query.id) {
      if (!this.$route.query.tag) {
        this.$router.push({ path: "/" });
        return;
      }
      this.$router.push({ path: "/" + this.$route.query.tag });
    }
  },
  mounted() {
    // return;
    let url = this.list.tag == 'classlist'?"courses/detail":"goods/detail";
    if (url !='classlist') {
      this.getAttrList()
    }
    this.GLOBAL.request({
      baseURL: this.GLOBAL.RNTY_SHOP_MALL_URL,
      url,
      param: {
        course_id:this.list.id,
        sku: this.list.id
      }
    }).then(({ data: data }) => {
      //console.log(data);
      this.infoOpaction = data;
      this.infoOpaction.detail =  data.detail?data.detail[0]:''//由于后端无法输出正确格式，手动重置
      this.bigImg = data.pictures[0].url;
      this.commentList = data.comment;
      if (this.list.tag == 'classlist') {
        this.classOp.course_id = Number(this.list.id);
        this.classOp.price = data.detail.price;
        this.classOp.course = data.detail.course
        this.classOp.quantity=1
      }else{
        this.goodsOp.sku = Number(this.list.id);
        this.goodsOp.specialty = data.detail.specialty
        this.goodsOp.price = data.detail.price;
        this.goodsOp.product = data.detail.product
        this.goodsOp.quantity=1
      }
      // //console.log(this.infoOpaction);
    });
  },
  methods: {
    chooseComm(val){
      if (val==3) {
        this.commentList = this.infoOpaction.comment;
        return;
      }
      this.commentList = this.infoOpaction.comment.filter(item => item.type == val)
    },
    getAttrList(nature){
      // //console.log(nature)
      this.GLOBAL.request({
        method:'post',
        baseURL: this.GLOBAL.RNTY_SHOP_MALL_URL,
        url: "goods/sel",
        data: {
          // course_id:this.list.id,
          sku: this.list.id,
          nature:JSON.stringify(nature),
        }
      }).then(({ data: data }) => {
        this.attr = data;
        //console.log(this.attr);
      });
    },
    changeImg(src) {
      this.bigImg = src;
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    changeSelect(key,val){
      if (this.isSelected[key] == val) {//点击同一属性同值，移除
        delete this.isSelected[key];
      }else{
        this.isSelected[key] = val;
        this.goodsOp[key]=val;
      }
      //console.log(this.isSelected);
      
      if (Object.keys(this.isSelected).length) {
         this.getAttrList(this.isSelected)
      }else{
        this.getAttrList()
      }
    }
  }
};
</script>
<style>
.class_info_cont {
  margin: 20px auto;
  min-height: 766px;
}
.breadcrumb {
  text-align: left;
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}
.breadcrumb span {
  padding-right: 5px;
  cursor: pointer;
}
.class_introduce {
  text-align: left;
}
.inner {
  width: 1200px;
  margin: 0 auto;
}
/* 商品展示 */
.shop_show {
  display: flex;
  height: 580px;
  padding: 26px 12px;
  box-sizing: border-box;
}
.goods_img_wraper {
  width: 480px;
  height: 625px;
  overflow: hidden;
}
/* 轮播 */
.big_img {
  width: 480px;
  height: 300px;
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
}
.big_img img {
  width: 100% !important;
  height: 100% !important;
  transition: 0.5s;
}
.small_img {
  border: 1px solid #ff2525;
  box-sizing: border-box;
  width:100px !important;
  height:75px !important;
}
.small_img img {
  width: 100% !important;
  height: 100% !important;
}
/* 右侧商品信息 */
.goods_info_wrap {
  width: 700px;
  padding: 0 20px 0 100px;
  box-sizing: border-box;
}
.goods_info_wrap h3 {
  font: 28px/36px "微软雅黑";
  text-align: center;
  color:#333;
  margin-bottom: 5px;
}
.goods_info_wrap .price{
  color:#ff2525;
  font:36px/78px "arail";
  border-top:1px solid #eee;
  border-bottom: 1px solid #eee;
}
.goods_info_wrap .attr{
  padding:50px;
}
.goods_info_wrap .attr dl{
  display: flex;
  align-items: center;
  height:52px;
  font:14px/52px "微软雅黑";
  color:#a9a9a9;
}
.goods_info_wrap .attr dt{
  width:50px;
}
.goods_info_wrap .attr dd{
  padding:0 11px;
  height:19px;
  line-height: 19px;
  margin-right:14px;
  border:2px solid #ccc;
  cursor: pointer;
}
.goods_info_wrap .attr .is_active{
  border-color:#ff2525;
  position: relative;
}
.goods_info_wrap .is_active i{
  position:absolute;
  bottom:0;
  right:0;
  width: 11px;
  height:11px;
  background: url('../assets/images/select2.png');
}
/* 下方 */
.class_info_slider {
  margin-top: 5px;
}
.goods_info{
  padding:15px;
}
.comm_head{
  height:50px;
  display: flex;
  align-items: center;
}
.comm_wrap .comm_item{
  width:1200px;
  min-height:120px;
  border-bottom:1px solid #e7e7e7;
  padding:25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.comm_item .user_info i{
  width:50px;
  height:50px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.comm_item .user_info img{
  width:100%;
  height:100%;
}
.comm_item .user_info span{
  font:14px/16px "微软雅黑";
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.comm_item p{
  width:940px;
  font:14px/20px "微软雅黑";
  color:#666;
}
.comm_item .comm_timer{
  width:135px;
  font:12px/12px "arail";
  color:#a1a1a1;
}
.comm_content_tip{
  margin-top:20px;
  font:12px/14px "微软雅黑";
  color:#666;
}
</style>